<template>
  <common-link path="/search/:handle"
    :params='{handle: encodeURIComponent(source.tag) }'
    v-if="source.type === 'searchFor'"
    class="block py-4 px-4 text-base text-gray-1000 truncate hover:text-purple-1300"
    target="_blank"
    v-html="$t('index_banner_searchForTagUsingAI',{tag:source.tag})">
  </common-link>
  <div v-else-if="source.type === 'categories'"
    class="py-2.5 px-4 text-base text-gray-1500 bg-gray-2600">
    {{$t('index_banner_categories')}}({{source.num}})
  </div>
  <common-link v-else-if="source.type === 'category'"
    path="/category/:handle"
    :params="{ handle: source.h}"
    @click.native="toStatistics()"
    class="search-item flex items-center gap-4 max-w-full py-4 px-4 text-base truncate go-category group"
    target="_blank">
    <div class="flex-1 w-0 truncate">
      <span class="text-gray-1000 group-hover:text-purple-1300">{{source.n}}</span>
      <em class="text-gray-1500 ml-3 not-italic">{{$t('index_banner_numTools',{num:$vReset(source.c)})}}</em>
    </div>
    <svg-icon className="text-base invisible group-hover:visible flex-shrink-0 r-arrow"
      iconName='arrow_right_purple'></svg-icon>
  </common-link>
  <div v-else-if="source.type === 'tools'"
    class="py-2.5 px-4 text-base text-gray-1500 bg-gray-2600">
    {{$t('index_banner_tools')}}({{source.num}})
  </div>
  <common-link v-else-if="source.type === 'tool'"
    path="/tool/:handle"
    :params="{ handle: source.h}"
    @click.native="toStatistics()"
    class="search-item flex items-center gap-4 max-w-full py-4 pl-4 pr-3 text-base truncate go-tool group"
    target="_blank">
    <span class="flex-1 w-0 text-base text-gray-1000 group-hover:text-purple-1300 truncate">{{source.n}}</span>
    <div class="flex-shrink-0 flex items-center min-w-90 r-similarweb">
      <svg-icon className="text-base flex-shrink-0 -mt-0.5"
        iconName='similarweb'></svg-icon>
      <span class="text-base text-gray-1000 ml-1">{{$vReset(source.c)}}</span>
    </div>
  </common-link>
  <div v-else-if="source.type === 'total'"
    class="text-center text-base text-gray-1000 py-4">
    {{$t('index_banner_numMatches',{num: source.num})}}
  </div>
</template>
<script>
import { mapState } from 'vuex'
import search from '~/mixins/search'
export default {
  name: 'SearchItemNew',
  mixins: [search],
  props: {
    source: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
  methods: {
    toStatistics() {
      if (this.source.type === 'category') {
        this.searchStatistics(
          `https://www.toolify.ai${
            this.locale === 'en' ? '' : `/${this.locale}`
          }/category/${this.source.h}`,
          this.source.tag,
          0
        )
      } else if (this.source.type === 'tool') {
        this.searchStatistics(
          `https://www.toolify.ai${
            this.locale === 'en' ? '' : `/${this.locale}`
          }/tool/${this.source.h}`,
          this.source.tag,
          0
        )
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.search-item {
  position: relative;
  &:hover {
    &::after {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      height: 100%;
      background: #7150e6;
      content: '';
    }
  }
  .min-w-90 {
    min-width: 90px;
  }
}
</style>
